<template>
  <div class="main">
    <div>
      <div v-if="info.having">
        {{ info.ip.province }}
        {{ info.ip.city }}
        {{ info.ip.district }}
        <br />
        天气：{{ info.weather.weather }} {{ info.weather.temperature }}°
      </div>
      <div v-else> 无法获取位置信息 </div>
    </div>

    <div>
      <div v-if="isLogin">
        <ElDropdown @command="handleMenu" v-loading="loading">
          <div>
            <ElAvatar :src="Api.getUserLogo(userInfo.tbUser.uid)" />
          </div>
          <template #dropdown>
            <ElDropdownMenu>
              <ElDropdownItem>
                <el-icon><Stamp /></el-icon>
                {{ userInfo.tbUserInfo.nickname }}
                ({{ userInfo.tbUser.username }})
              </ElDropdownItem>

              <ElDropdownItem divided command="home">
                <el-icon><ChromeFilled /></el-icon> 网站首页
              </ElDropdownItem>
              <ElDropdownItem command="userhome">
                <el-icon><HomeFilled /></el-icon> 用户首页
              </ElDropdownItem>

              <ElDropdownItem divided command="userlogo">
                修改用户头像
              </ElDropdownItem>
              <ElDropdownItem command="userinfo"> 修改用户信息 </ElDropdownItem>

              <ElDropdownItem divided command="logout">
                <el-icon><Eleme /></el-icon> 安全退出
              </ElDropdownItem>
            </ElDropdownMenu>
          </template>
        </ElDropdown>
      </div>
      <div v-else>
        <el-button @click="router.push('/user/login')">登录</el-button>
      </div>
    </div>
  </div>

  <!-- 修改用户信息的对话框 -->
  <el-dialog title="信息修改" v-model="mvisible" @closed="queryUser">
    <!-- {{ muserinfo }} -->
    <div>
      <ElForm>
        <ElFormItem label="姓名">
          <ElInput v-model="muserinfo.nickname"></ElInput>
        </ElFormItem>
        <ElFormItem label="简介">
          <ElInput v-model="muserinfo.info"></ElInput>
        </ElFormItem>
        <ElFormItem label="QQ">
          <ElInput v-model="muserinfo.qq"></ElInput>
        </ElFormItem>
        <ElFormItem label="微信">
          <ElInput v-model="muserinfo.wechat"></ElInput>
        </ElFormItem>

        <ElFormItem label="性别">
          <ElRadioGroup v-model="muserinfo.sex">
            <ElRadio value="m">男</ElRadio>
            <ElRadio value="f">女</ElRadio>
            <ElRadio value="n">保密</ElRadio>
          </ElRadioGroup>
        </ElFormItem>
      </ElForm>
    </div>

    <template #footer>
      <ElButton @click="mvisible = false">关闭</ElButton>
      <ElButton @click="saveUserInfo" type="primary">保存</ElButton>
    </template>
  </el-dialog>
</template>

<script setup>
//#region 基础导入
import { ref } from 'vue';
import { Api } from '../script/Api';

import { storeToRefs } from 'pinia';
import ipstore from '../store/ipinfo';
import userstore from '../store/userinfo';

import { useRouter } from 'vue-router';
const router = useRouter();

import {
  ElAvatar,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  ElDialog,
  ElMessage,
  ElForm,
  ElFormItem,
  ElInput,
  ElRadio,
  ElRadioGroup,
  ElButton,
} from 'element-plus';

const { info } = storeToRefs(ipstore());
const { isLogin, userInfo } = storeToRefs(userstore());
const { queryUser } = userstore();
import { Tools } from '../script/Tools';
//#endregion

//#region 菜单
const handleMenu = (command) => {
  console.log('点击的选项', command);
  if (command == 'home') {
    router.push('/');
  } else if (command == 'userhome') {
    router.push('/user/main');
  } else if (command == 'logout') {
    logout();
  } else if (command == 'userinfo') {
    modifyUserInfo();
  } else if (command == 'userlogo') {
    modifyLogo();
  }
};
//#endregion

//#region 修改用户头像

// 完成密码修改功能,开发者信息显示
// 用户注册
// 公告管理
// 游戏和游戏发行商管理
// 电影和电影排片管理

const modifyLogo = () => {
  Tools.browseImage((file) => {
    Api.upload('/user/logo', file, {}, (data) => {
      if (data.success) {
        ElMessage.success('修改成功');
        // 刷新页面更新头像
        location.reload();
      } else {
        ElMessage.error(data.message);
      }
    });
  });
};

//#endregion

//#region 用户信息修改
const muserinfo = ref({});
const mvisible = ref(false);
const modifyUserInfo = () => {
  // 复制要修改的信息
  muserinfo.value = {
    nickname: userInfo.value.tbUserInfo.nickname,
    info: userInfo.value.tbUserInfo.info,
    qq: userInfo.value.tbUserInfo.qq,
    wechat: userInfo.value.tbUserInfo.wechat,
    sex: userInfo.value.tbUserInfo.sex,
  };
  mvisible.value = true;
};

const saveUserInfo = () => {
  Api.put('/user', muserinfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
    } else {
      ElMessage.error(data.message);
    }
  });
};

//#endregion

const loading = ref(false);

//#region 安全退出
const logout = () => {
  loading.value = true;
  Api.delete('/auth', {}, () => {
    // 安全退出后要更新pinia中用户的状态
    queryUser(() => {
      loading.value = false;
    });
  });
};
//#endregion
</script>

<style scoped>
.main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
}
</style>
